<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的世界</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="game.js"></script>
</head>
<body>
    <header>
        <img src="./img/game.png" alt="">
    </header>
    <div class="back">
        <div class="inner">
            <img src="./img/logo.webp" alt="" class="logo">
            <div class="innerImg">
                <img src="./img/small1.png" alt="">
                <img src="./img/small2.png" alt="">
                <img src="./img/small3.png" alt="">
                <img src="./img/small4.png" alt="">
                <img src="./img/small5.png" alt="">
                <img src="./img/small6.png" alt="">
                <img src="./img/small7.png" alt="">
                <img src="./img/small1.png" alt="">
            </div>
            <ul>
                <li>官网首页</li>
                <li>新闻资讯</li>
                <li>线下活动</li>
                <li>玩家攻略</li>
                <li>玩家作品</li>
                <li>视频中心</li>
                <li>社区互动</li>
                <li>创造者计划</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <div class="register">
            <div class="head">
                <input type="image" src="./img/logo1.jpg" id="smileImage">
            </div>
            <div class="username" >
                <p id="innerText">用户名:请进行登录或注册</p>
                <button class="btn btn-warning" id="btn3" data-toggle="modal" data-target="#myModal3">修改信息</button>
                <button class="btn btn-danger" id="btn4">注销</button>
            </div>
            <div class="btn1">
                <button type="button" class="btn btn-primary" id="btn1" data-toggle="modal" data-target="#myModal1">登录</button>
                <button type="button" class="btn btn-success" id="btn2" data-toggle="modal" data-target="#myModal2">注册</button>
            </div>
        </div>
    </div>
    <!-- 登录模态框 -->
<div class="modal fade" id="myModal1">
    <div class="modal-dialog">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h5 class="modal-title">登录</h5>
          <button type="button" class="close" data-dismiss="modal" id="headclose1">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
        <form action="#" id="form2">
          <div class="modal-body">
            <p>
                <span>手机号</span><input type="text" placeholder="请输入正确的11位手机号" size="25"  maxlength="11" name="user-phone1"><br/>
            </p>
            <p>
                <span>密码</span><input type="password" size="25" placeholder="请输入密码" maxlength="10" name="user-password1">
            </p>
          </div>
        </form>
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close3">关闭</button>
          <button type="button" class="btn btn-info" id="enroll">提交</button>
        </div>
      </form>
      </div>
    </div>
  </div>

  <!-- 注册模态框 -->
<div class="modal fade" id="myModal2">
    <div class="modal-dialog">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h5 class="modal-title">注册</h5>
          <button type="button" class="close" data-dismiss="modal" id="headclose2">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
        <!-- <form action="#" id="form1"> -->
          <div class="modal-body">
            <form action="#" id="form1">
            <p>
                <span>头像</span><img src="./img/logo1.jpg" id="myModal2-image" imageId = 1 name="Userimage">
            </p>
            <p>
                <span>手机号</span><input type="text" placeholder="请输入正确的11位手机号" size="25" maxlength="11" id="user-phonoe" name="Userphone"><br/>
            </p>
            <p>
                <span>用户名</span><input type="text"  size="25" maxlength='5' id="user-name" name="Username"><br/>
            </p>
            <p>
                <span>密码</span><input type="password" size="25" placeholder="请输入5-10位密码" maxlength="10" id="user-password" name="Userpassword">
            </p>
          </form>
        </div>
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close1">关闭</button>
          <button type="button" class="btn btn-info" id="submit1">提交</button>
        </div>
      </form>
      </div>
    </div>
  </div>

  <!-- 修改信息模态框 -->
  <div class="modal fade" id="myModal3">
    <div class="modal-dialog">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h5 class="modal-title">修改信息</h5>
          <button type="button" class="close" data-dismiss="modal" id="headclose3">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
        <!-- <form action="#" id="form1"> -->
          <div class="modal-body">
            <form action="" id="form3">
            <p>
                <span>头像</span><img src="./img/logo1.jpg" id="myModal3-image" imageId1 = 1 name="Userimage">
            </p>
            
            <p>
                <span>手机号</span><input type="text" placeholder="请输入正确的11位手机号" size="25" maxlength="11" id="user-phonoe" name="Userphone" disabled="disabled"><br/>
            </p>
            <p>
                <span>用户名</span><input type="text"  size="25" maxlength='5' id="user-name" name="Username"><br/>
            </p>
            <button type="button" class="btn btn-danger" id="changePassword">修改密码</button>
            <p>
                <span>密码</span><input type="password" size="25" placeholder="请输入5-10位密码" maxlength="10" id="user-password" name="Userpassword" disabled="disabled">
            </p>
          </form>
        </div>
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close2">关闭</button>
          <button type="button" class="btn btn-info" id="submit2">提交</button>
        </div>
      </form>
      </div>
    </div>
  </div>
  
  <!-- 修改生物信息模态框 -->
  <div class="modal fade" id="Modal">
    <div class="modal-dialog">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h5 class="modal-title">修改生物信息</h5>
          <button type="button" class="close" data-dismiss="modal" id="headclose4">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
        <!-- <form action="#" id="form1"> -->
          <div class="modal-body">
            <form action="" id="form4">
            <p>
                <span>生物图片</span><img src="./img/logo1.jpg" id="myModal4-image" imageId2 = 1 name="BiologyImage">
            </p>
            <p>
              <span>id</span><input name="BiologyId" id="BiologyId">
          </p>
            <p>
                <span>生物名字</span><input type="text"  size="25" maxlength='5' id="BiologyName" name="BiologyName"><br/>
            </p>
            
            <p>
                <span>图片路径</span><input type="text" size="25" placeholder="请输入正确的路径"  id="user-password" name="BiologyLocation">
            </p>
            <p>
              <span>生物类型</span><select name="生物类型" id="selected2">
                <option value="Boss" name="option1">Boss</option>
                <option value="被动型" name="option2">被动型</option>
                <option value="攻击型" name="option3">攻击型</option>
                <option value="可驯服" name="option4">可驯服</option> 
                <option value="效用型" name="option5">效用型</option> 
                <option value="中立型" name="option6">中立型</option> 
          </select>
            </p>
            <button type="button" class="btn btn-danger" id="deleteBiology">删除生物</button>
          </form>
        </div>
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close4">关闭</button>
          <button type="button" class="btn btn-info" id="submit3">提交</button>
        </div>
      </form>
      </div>
    </div>
  </div>

  <!-- 添加生物模态框 -->
  <div class="modal fade" id="Modal1">
    <div class="modal-dialog">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h5 class="modal-title">添加生物</h5>
          <button type="button" class="close" data-dismiss="modal" id="headclose5">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
          <div class="modal-body">
            <form action="" id="form5">
            <p>
                <span>生物名字</span><input type="text"  size="25" maxlength='5' id="user-name" name="BiologyName"><br/>
            </p>
            
            <p>
                <span>图片路径</span><input type="text" size="25" placeholder="请输入正确的路径"  id="user-password" name="BiologyLocation">
            </p>
            <p>
              <span>生物类型</span><select name="生物类型" id="selected1">
                <option value="Boss" name="option1">Boss</option>
                <option value="被动型" name="option2">被动型</option>
                <option value="攻击型" name="option3">攻击型</option>
                <option value="可驯服" name="option4">可驯服</option> 
                <option value="效用型" name="option5">效用型</option> 
                <option value="中立型" name="option6">中立型</option> 
          </select>
            </p>
          </form>
        </div>
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close5">关闭</button>
          <button type="button" class="btn btn-info" id="submit4">提交</button>
        </div>
      </form>
      </div>
    </div>
  </div>
  <div id="animal">
        <div id="biology">
            <p>生物类型</p>
            <div><input type="radio" value="Boss" name="biology" id="biology1" checked/>BOSS</div>
            <div><input type="radio" value="passive" name="biology" id="biology2"/>被动型</div>
            <div><input type="radio" value="aggressive" name="biology" id="biology3"/>攻击型</div>
            <div><input type="radio" value="tamable" name="biology" id="biology4"/>可驯服</div>
            <div><input type="radio" value="impact" name="biology" id="biology5"/>效用型</div>
            <div><input type="radio" value="neutral" name="biology" id="biology6"/>中立型</div>
            <div><input type="text" placeholder="请输入想要搜索的生物名字" size="25" maxlength='5' id="wantFind"><button id="find">搜索</button></div>
        </div>
        <div id="animalList">

        </div>
    </div>
    
  </div>
</body>
</html>